<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {padding:0px;margin:0px;}
            ul,ol {list-style: none;}

            /* 头 */
            ul>li {
                width: 100px;height: 30px;
                background-color: #000;
                color: #fff;
                display: inline-block;
            }
            ul > li.active {background-color: orange; cursor: pointer;}

            /* 内容 */
            ol > li {
                width: 400px;
                height: 100px;
                background-color: green;
                display: none;
                text-align: center;
                font: 30px/40px "";
            }
            ol > li.active {display: block;}
        </style>
    </head>
    <body>
        <div class="tab1">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            
            <ol>
                <li class="active">01内容</li>
                <li>02内容</li>
                <li>03内容</li>
            </ol>
        </div>

        <div class="tab2">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            
            <ol>
                <li class="active">01内容</li>
                <li>02内容</li>
                <li>03内容</li>
            </ol>
        </div>
        


        <script>
            class table {
                constructor(el) {
                    this.el = document.querySelector(el)
                    this.init()
                }
                init() {
                    //移入头部变化
                    this.yrtb()
                    // //移出添加样式
                    // this.tianjia()
                    // //内容变化
                    // this.nrbh()
                }

                yrtb() {
                    let ulli = this.el.querySelectorAll('ul>li')
                    ulli.forEach( (item,index) => {
                        item.onmouseover = () => {
                            this.tianjia(index)
                            this.nrbh(index)
                        }
                    })
                }
                
                tianjia(index) {
                    let ulli = this.el.querySelectorAll('ul>li')
                    ulli.forEach( item => {
                        item.className = '' 
                    })
                    console.log(index);
                    console.log(ulli[index]);
                    ulli[index].className = 'active' 
                    
                    
                }

                nrbh(index) {
                    let olli = this.el.querySelectorAll('ol>li')
                    olli.forEach( item => {
                        item.className = '' 
                        // console.log(item.className);

                    })
                    olli[index].className = 'active'
                }
            
            }
            console.log(table);
            const xxx1 = new table('.tab1')
            const xxx2 = new table('.tab2')

            
        </script>


    </body>
</html>